import EmptyContent from "@lib/empty/EmptyContent";
import { createMemo, Show, Index } from "solid-js";
import { TableRow } from "./TableRow";
import type { TableBodyProps } from "./types";

const TableBody = <T extends {}>(props: TableBodyProps<T>) => {
    const hasDatas = createMemo(() => {
        return (props.datas ?? []).length;
    });

    const mapped = createMemo(() => {
        return props.columns?.map((col) => {
            // const has = hasNumberWidth(col);

            return {
                ...col,
                classList: {
                    "text-start": (col.align ?? col.headerAlign) === "start",
                    "text-center": (col.align ?? col.headerAlign) === "center",
                    "text-end": (col.align ?? col.headerAlign) === "end",
                    ...col?.classList,
                },
            };
        });
    });

    return (
        <tbody classList={props.classList}>
            {/* <Show
                when={hasDatas()}
                fallback={
                    <tr class="h-100 vertical-middle">
                        <td colSpan={mapped()?.length ?? 0} class="h-100">
                            <EmptyContent>{props.emptyContent}</EmptyContent>
                        </td>
                    </tr>
                }
            >

            </Show> */}
            <Index each={props.datas ?? []}>
                    {(data, rowIndex) => (
                        <TableRow
                            data={data()}
                            columns={mapped()}
                            index={rowIndex}
                        ></TableRow>
                    )}
                </Index>
        </tbody>
    );
};

export default TableBody
